<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .swipe-wrapper {
            --swipe-width: 500px;
            --swipe-height: 300px;
            --swipe-font-size: 14px;
            width: var(--swipe-width);
            height: var(--swipe-height);
            margin-inline: auto;
            margin-block-start: 50px;
            position: relative;
            font-size: var(--swipe-font-size);

            & .swipe-slides {
                display: flex;
                /* overflow: hidden; */

                & .swipe-item {
                    width: var(--swipe-width);
                    height: var(--swipe-height);
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    /* transform: translateX(0%); */
                    transition: transform 0.3s;
                    /* border-top: 1px solid;
                    border-bottom: 1px solid;
                    border-left: 1px solid; */
                    font-weight: 600;
                    font-size: 50px;
                }

                & .swipe-item:nth-child(odd) {
                    background-color: rgb(200, 231, 233);
                }

                & .swipe-item:nth-child(even) {
                    background-color: blanchedalmond;
                }

                /* & .swipe-item:last-child {
                    border-right: 1px solid;
                } */
            }



            & .swipe-prev,
            & .swipe-next {
                position: absolute;
                top: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                font-size: 14px;
                font-weight: normal;
                background-color: rgba(0, 0, 0, 0.5);
                color: #fff;
                border-radius: 50%;
                cursor: pointer;
                border: 1px solid #eee;

                &:hover {
                    background-color: rgba(0, 0, 0, 1);
                }
            }

            & .swipe-prev {
                left: 15px;
            }

            & .swipe-next {
                right: 15px;
            }

            & .swipe-indicators {
                position: absolute;
                bottom: 15px;
                display: flex;
                left: 50%;
                transform: translateX(-50%);
                gap: 10px;

                & .swipe-indicator {
                    width: 20px;
                    height: 5px;
                    background-color: #999;
                    cursor: pointer;

                    &.active,
                    &:hover {
                        background-color: #000
                    }
                }
            }
        }
    </style>
</head>

<body>
    <div class="swipe-wrapper">
        <div class="swipe-slides">
            <!-- <div class="swipe-item">1</div>
            <div class="swipe-item">2</div>
            <div class="swipe-item">3</div> -->
        </div>

        <div class="swipe-prev">&lt;</div>
        <div class="swipe-next">&gt;</div>

        <div class="swipe-indicators">
            <!-- <div class="swipe-indicator"></div>
            <div class="swipe-indicator"></div>
            <div class="swipe-indicator"></div> -->
        </div>
    </div>

    <script>
        let stop = false
        let currentIndex = 1
        const swipeWrapper = document.querySelector('.swipe-wrapper');
        const data = new Array(3).fill('')
        const swipeSlides = document.querySelector('.swipe-slides');
        swipeSlides.innerHTML = data.map((_, index) => {
            return `<div class="swipe-item">${index + 1}</div>`
        }).join('')

        const firstElementChild = swipeSlides.firstElementChild
        const lastElementChild = swipeSlides.lastElementChild
        const cloneFirstElementChild = firstElementChild.cloneNode(true)
        const cloneLastElementChild = lastElementChild.cloneNode(true)
        console.log(cloneFirstElementChild)
        console.log(cloneLastElementChild)
        swipeSlides.appendChild(cloneFirstElementChild)
        swipeSlides.insertBefore(cloneLastElementChild, firstElementChild)

        const swipeItems = document.querySelectorAll('.swipe-item');
        const swipeIndicators = document.querySelectorAll('.swipe-indicators');
        swipeIndicators.innerHTML = data.map((_, index) => {
            return `<div class="swipe-indicator"></div>`
        }).join('')
        const swipeIndicatorItems = document.querySelectorAll('.swipe-indicator');
        const swipePrev = document.querySelector('.swipe-prev');
        const swipeNext = document.querySelector('.swipe-next');

        console.log('currentIndex', currentIndex)
        console.log('swipeItems.length', swipeItems.length)

        const setTranslateX = (xVal) => {
            const x = xVal === 0 ? xVal : -xVal
            swipeItems.forEach((item) => {
                item.style.transform = `translateX(${x * 100}%)`
            })
        }
        const setActiveIndicator = (currentIndex) => {
            let cIndex = currentIndex
            if (currentIndex === 0) {
                cIndex = swipeItems.length - 2
            } else if (currentIndex === swipeItems.length - 1) {
                cIndex = 1
            }
            swipeIndicatorItems.forEach((el, index) => {
                el.classList.remove('active')
                if (index === cIndex - 1) {
                    el.classList.add('active')
                }
            })
        }
        const forceRender = () => {
            swipeItems.forEach((item) => item.offsetWidth)
        }
        const setTransition = (isRemove) => {
            swipeItems.forEach((item) => {
                item.style.transition = isRemove ? 'none' : 'transform 0.3s'
            })
        }
        setTranslateX(currentIndex)
        setActiveIndicator(currentIndex)

        const doPrev = () => {
            if (stop) {
                return
            }
            currentIndex--
            setTranslateX(currentIndex)
            if (currentIndex === 0) {
                stop = true
                setTimeout(() => {
                    console.log('swipePrev', '临界点了');
                    currentIndex = swipeItems.length - 2
                    setTransition(true)
                    setTranslateX(currentIndex)
                    forceRender()
                    setTransition()
                    stop = false
                }, 300)
            }
            console.log('swipePrev', currentIndex);
            setActiveIndicator(currentIndex)
        }
        const doNext = () => {
            if (stop) {
                return
            }
            currentIndex++
            setTranslateX(currentIndex)
            if (currentIndex === swipeItems.length - 1) {
                stop = true
                setTimeout(() => {
                    console.log('swipeNext', '临界点了');
                    currentIndex = 1
                    setTransition(true)
                    setTranslateX(currentIndex)
                    forceRender()
                    setTransition()
                    stop = false
                }, 300)
            }
            console.log('currentIndex', currentIndex);
            setActiveIndicator(currentIndex)
        }

        swipePrev.addEventListener('click', doPrev)
        swipeNext.addEventListener('click', doNext)

        setInterval(() => {
            doNext()
        }, 2000)

        swipeIndicatorItems.forEach((el, index) => {
            el.addEventListener('click', () => {
                if (stop) {
                    return
                }
                currentIndex = index + 1
                console.log('currentIndex', currentIndex)
                setTranslateX(currentIndex)
                setActiveIndicator(currentIndex)
            })
        })

    </script>
</body>

</html>